<template>
  <div class="cate_add">
    <el-header class="top">
      <i class="el-icon-s-home"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">分类的管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看分类</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>查看分类详情</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
       
        <!-- 卡片组件的内容-添加表单 -->
        <el-form ref="addForm" :model="ctgy" label-width="80px">

            <el-form-item label="分类名" >
              <el-input v-model="ctgy.cate_name" style="width:300px" placeholder="输入文章标题"></el-input>
            </el-form-item>

            <el-form-item label="排序">
              <el-input v-model="ctgy.order_num" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="是否启用">
              <!-- 无法默认选中 -->
              <!-- <el-radio-group v-model="ctgy.is_show">
                <el-radio label="是" :value="1"></el-radio>
                <el-radio label="否" :value="0"></el-radio>
              </el-radio-group> -->
        
              <!-- 选项文字放el-radio标签中，label表示值 -->
              <el-radio-group v-model="ctgy.is_show">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
              <!-- {{ ctgy.is_show }} -->
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="goList">返回</el-button>
            </el-form-item>

        </el-form>

    </el-card>
  </div>
</template>

<script>
  import http from '../utils/http';

  export default {
    data(){
      return {
        //把表单数据放一个对象中
        ctgy:{
          cate_name:"",
          order_num:"", //分类排序，从小到大排列，默认为0
          is_show:1,// 1 启用、0 禁用
        },
        cid:0 //分类id
      }
    },
    created(){
      // 拿到分类id /admin/category/detail/7
      let params = this.$route.params; //{cid: '7'} 参数组组成的一个对象
      console.log(params)
      this.cid = params.cid;

      // 拿到分类id 对应的数据
      this.getCateInfoById()
    },
    methods:{
      async getCateInfoById(){
        console.log('准备取数据a...')
        // http://127.0.0.1:3000/article/cate_edit/36
        let res = await http.get("/api/article/cate_edit/"+this.cid)
        console.log(res)

        // 取结果
        let result = res.data;
        console.log(result)

        // 赋值到data中的变量，好显示在页面上
        if(result.code == 0){
          let cate_info = result.data;

          this.ctgy.cate_name = cate_info.cate_name;
          this.ctgy.order_num = cate_info.order_num; //分类排序，从小到大排列，默认为0
          this.ctgy.is_show = cate_info.is_show;// 1 启用、0 禁用
        }
      },
      goList(){
        this.$router.push("/admin/category/list") // 到 /admin/category/list
      }
    }
  }
</script>

<style lang="less" scoped>
.cate_add{
  // margin:15px;
  
  // /deep/ 深度选择器，可以重置组件内置的样式。别忘了样式要加scoped，
  // 有可能还需要!important来提升样式的优先级。
  /deep/.el-header {
    display: flex;
    align-items: center;
    height: 62px !important;
    background: #edebeb;

    .el-icon-s-home {
      color: #000000;
      font-size: 20px;
    }

    .el-breadcrumb {
      height: 35px;
      display: flex;
      align-items: center;
      margin-bottom: 0;
      font-size: 12px;
    }
  }

  .box-card{
    margin: 10px;
  }
}
</style>